<template>
	<view class="mine-page page">
		<image class="top-bg" :src="cloudStorage+'index/top-bg-blur.png'"></image>
		<CustomNav :isBack="false" :color="titleColor" :topBgColor="topBgColor" title="我的"></CustomNav>
		<view @click="navigate('/page_pack/user/info')" class="user-block" :style="'margin-top:'+mt">
			<image class="user-photo" :src="user.avatar||cloudStorage+'index/user-photo.png'"></image>
			<view class="user-info" v-if="user.phone">
				<view class="user-name">{{user.name}}</view>
				<view class="user-phone">{{user.phone}}</view>
			</view>
			<view class="user-info" v-else>
				<view class="user-name">点击登录</view>
			</view>
		</view>
		<view class="block content-block">
			<view class="menu-block">
				<view @click="navigate('/page_pack/user/release')" class="menu-item">
					<image :src="cloudStorage+'index/mine-icon-release.png'" class="menu-icon"></image>
					<view class="menu-name">我的发布</view>
					<image :src="arrow" class="arrow"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				titleColor:'#000',
				topBgColor:'rgba(0,0,0,0)',
				user:{
					name:'',
					phone:'',
					avatar:'',
				}
			}
		},
		computed:{
			arrow(){
				return this.cloudStorage+'index/arrow.png'
			},
			token(){
				return this.$store.getters.token
			}
		},
		onShow() {
			const user=this.$store.getters.user;
			if(user){
				Object.keys(this.user).forEach(item=>{
					this.user[item]=user[item]
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.mine-page{
		position: relative;
		overflow: hidden;
		.top-bg{
			width: 100%;
			position: absolute;
			height: 480rpx;
			top: 0;
			left: 0;
			z-index: 0;
		}
		.user-block{
			position: relative;
			width: 100%;
			display: flex;
			align-items: flex-start;
			padding: 0 30rpx;
			.user-photo{
				width: 150rpx;
				height: 150rpx;
				border-radius: 50%;
				margin-right: 30rpx;
			}
			.user-info{
				width: calc(100% - 180rpx);
				height: 150rpx;
				display: flex;
				flex-direction: column;
				justify-content: center;
				color: #000;
				font-size: 34rpx;
				font-weight: bold;
				.user-phone{
					font-weight: normal;
					margin-top: 20rpx;
					font-size: 28rpx;
					color: #4a4a4a;
				}
			}
		}
		.content-block{
			height: calc(100vh - 480rpx);
			background: $background-color;
			margin-top: 30rpx;
			position: relative;
			border-radius: 30px 30px 0 0;
			padding: 30rpx;
			.menu-block{
				.menu-item{
					border-radius: 8px;
					background: #fff;
					width: 100%;
					height: 160rpx;
					display: flex;
					align-items: center;
					padding: 0 30rpx;
					.menu-icon{
						width: 60rpx;
						height: 60rpx;
					}
					.arrow{
						width: 40rpx;
						height: 40rpx;
					}
					.menu-name{
						width: calc(100% - 140rpx);
						margin: 0 20rpx;
					}
				}
			}
		}
	}
</style>